<style lang="less" scoped rel="stylesheet/less">
	.select {
	    display: inline-block;
	    background-color: #fff;
	    position: relative;
	    border: 1px solid #e8e8e8;
	    font-size: .6em;
	    height: 4rem;
	    line-height: 4rem;
	    padding: 0 1rem 0 .5rem;
	    border-radius: .3rem;
	    width: 100%;
	    margin-bottom: 1rem;
		.label {
			text-align: left;
			font-size: 1.3rem;
		}

		select {
			display: block;
			-webkit-appearance: none;
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			opacity: 0;
			border: none;
			font-size: 1.3rem;
			z-index: 10;
		}
		
		.icon-xiajiantou {
			font-style: normal;		
			font-size: 0.4rem;
			color: #999;
			position: absolute;
			right: 0.5rem;
			top: 0.8rem;
			width: 2.2rem;
			height: 2.2rem;
			
		}
	}
	
</style>
<template>
	<div class="select"  v-if="option">
		<div class="label">{{labelText}}</div>		
		<select  @change="onChange($event)" v-model="targteId"  v-el:select-ele > 
			<option v-for="item in option"  :value="item.id" track-by="$index">{{item.name}}</option>								
		</select>
		<img src="dow.png" class="icon-xiajiantou" />
	</div>
</template>

<script>
	
	export default {
		props:{
			//接受data数据
			option:{
				required:true   //是否为必需 默认为 true
			},
			text:{
				default:String, 
				required:false   //是否为必需 默认为 true
			},
			type:{
				default:Boolean, 
				required:true   //是否为必需 默认为 true
			},				
			callback:{
				default:Function, //回调 
				required:true 
			},
			changeType:{
				default:Function, //是否要出发change事件
				required:false 
			}
			
		},		
		data(){
			return {
				labelText:'',
				targteId:0,				
			}
		},
		ready(){	
			console.log(this.changeType)
			if(this.changeType){
				setTimeout(function(){
					let _this = this;
					console.log(111)
					this.$els.selectEle.focus();
				}.bind(this),20)
			}
			this.$set('labelText',this.text);
		},
		methods: {
            onChange: function (event) {            
               this.selectBrand();
            },
			selectBrand() {               
                if (this.targteId || this.targteId === 0) {
                    var option = this.option;
                    this.option.forEach( (val,index) => {                   	
                        if(val.id ==  this.targteId){                         	
	                        this.labelText = val.name;	
	                        if (typeof this.callback == "function") {     
			                	//判断当前类型 
			                	this.callback(this.targteId,this.labelText);                            
			                }
	                        this.$els.selectEle.selectedIndex = index;	                      
                    	}
               		})

                }
			},
			

        },
        watch:{
        	// 每一次改变,都要进行数据初始化.
            "option": function (val, oldVal) {
            	
                if (this.option) {                 
                    this.$els.selectEle.selectedIndex = -1;
                    this.selectBrand();
                }
            },
           
        }
	}
</script>

<style>
</style>